import React, { useEffect, useState } from 'react'
import { Button, Drawer, Checkbox, Form, Input, DatePicker, TreeSelect } from 'antd';
// import { getAllCategory } from '../../apis/category';
import { getAllServer } from '../../../apis/sever';


type Props = {
    changeServerId: (id: string) => void,
    serviceTypeId: string
}

const ServerTree = ({ changeServerId, serviceTypeId }: Props) => {

    const [value, setValue] = useState<string>();
    const [treeData, setTreeData] = useState([]);

    useEffect(() => {
        allCategory()
        console.log('serviceTypeId', serviceTypeId)
        setValue(serviceTypeId)
    }, [serviceTypeId])


    //获取所有分类数据
    const allCategory = async () => {
        const res = await getAllServer()
        console.log('res', res)
        setTreeData((res as any).data.rows.children)
    }
    const onChange = (newValue: string) => {
        console.log(newValue);
        setValue(newValue);
        changeServerId(newValue)
    };
    return (
        <div>
            <TreeSelect
                allowClear={true}
                style={{ width: '200px' }}
                value={value}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                treeData={treeData}
                placeholder="请选择类型"
                treeDefaultExpandAll={false}
                onChange={onChange}
            />
        </div>
    )
}

export default ServerTree